<template>
	<view class="fwcontainer">		
		<view class="uni-padding-wrap uni-common-mt">					
			<form @submit="bindSubmit" @reset="bindReset">
				<view class="uni-form-item uni-column">
					<view class="uni-title euni-label-require">车牌号</view>
					<input class="uni-input" name="car_sn" :value="dataInfo.car_sn" placeholder="请输入车牌号" maxlength="10" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="uni-title">车主</view>
					<input class="uni-input" name="car_owner" :value="dataInfo.car_owner" placeholder="请输入车主" maxlength="5" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="uni-title">手机号</view>
					<input class="uni-input" name="cellphone" :value="dataInfo.cellphone" placeholder="请输入手机号" maxlength="11" type="number"/>
				</view>
				<view class="uni-form-item uni-column">
					<view class="uni-title">购车时间（示例：2020-10）</view>
					<input class="uni-input" name="buy_date" :value="dataInfo.buy_date" placeholder="请输入购车时间" maxlength="7" />					
				</view>
				<view class="uni-form-item uni-column">
					<view class="uni-title">车辆备注</view>
					<view class="uni-textarea">
						<textarea name="remark" :value="dataInfo.remark" maxlength="80" placeholder="请输入车辆备注"/>
					</view>
				</view>
				<button form-type="submit" type="primary" :disabled="dataSubmitDisabled" :loading="dataSubmitLoading" class="submit-button">保存数据</button>
				<!-- <button form-type="reset">重置</button> -->
			</form>
		</view>
	</view>
</template>

<script>	
	var  graceChecker = require('@/static/common/graceChecker.js');
	
	const APP = getApp();
	
	export default {
	    components: {},
		data() {
			return {
				//设置数据
				dataId:-1,
				dataInfo:{},				
				//控制组件
				dataSubmitDisabled:false,
				dataSubmitLoading:false,
				//其他标识
				dataRefreshPrepage:false,
			}
		},
		computed:{
			
		},
		methods:{
			bindReset(e){
				console.log(e);
			},
			bindSubmit(e){
				//定义表单规则
				var rule = [
				    {name:"car_sn", checkType : "string", checkRule:"7,8",  errorMsg:"请输入7位或8位的车牌号"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){		
					this.doSubmitSwitch(true,true);
					
					let _this = this;
					let fields = {
						car_sn:formData.car_sn,
						car_owner:formData.car_owner,
						cellphone:formData.cellphone,
						buy_date:formData.buy_date,
						remark:formData.remark
					};
					if(_this.dataId !== -1) fields.id = _this.dataId;
					
					APP._post('/api/car/form',fields, null, function (res) {
					  //执行成功
					  if (res.code === APP.appconfig.fwcode.successed) {										
						APP.apptool.showToastInfo(res.msg, null, 2000, function (res) {
							 APP.apptool.navigateBackPage(1, function (targetPage) {
								if (_this.dataRefreshPrepage) {
								  //需刷新数据面，必须实现refreshPage()方法
								  targetPage.refreshPage();
								}
							 });
						});
					  } else {
						APP.apptool.showToastInfo(res.msg);
					  }
					}, function (res) {
					  //执行失败
					}, function (res) {
					  //执行完成
					  _this.doSubmitSwitch(false,false);
					});
				}else{
				    uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			loadPageData: function(completedcallback) {
				let _this = this;
				APP._post('/api/car/info', {
					tid: _this.dataId
				}, null, function(res) {
					//执行成功
					if (res.code === APP.appconfig.fwcode.successed) {
						_this.dataInfo = res.data;
					} else {
						APP.apptool.showToastInfo(res.msg);
					}
				}, function(res) {
					//执行失败
				}, function(res) {
					//执行完成
					completedcallback && completedcallback();
				});
			},
			doSubmitSwitch: function(disabled, loading){
				this.dataSubmitDisabled = disabled;
				this.dataSubmitLoading = loading;
			}
		},		
		onLoad(options) {			
			if (options.tid){
				this.dataId = options.tid;
				this.loadPageData(null);
			}
			if (options.refreshpage){
				//刷新标识：refreshpage=refresh
				this.dataRefreshPrepage = (options.refreshpage=='refresh');
			}
		}
	}
</script>

<style>
	.submit-button{margin-top: 20px;}
</style>
